<template>
  <!-- 观众列表 -->
  <div class="member_list">
    <ul id="memberUl">
      <li v-for="(item, index) in memberArr" :key="index">
        <div>{{item.name}}</div>
        <div class="mem_func">
          <img v-for="(val, index) in funcArr" :key="index" :src="val.url" :data-src="val.exUrl" alt="" @click="changeFunc(item, val, $event)">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      funcArr: [
        { url: require('../../assets/img/mem_start_audio.png'), exUrl: require('../../assets/img/mem_ban_audio.png'), functionname: 'audio' },
        { url: require('../../assets/img/mem_start_video.png'), exUrl: require('../../assets/img/mem_ban_video.png'), functionname: 'video' }
      ]
    }
  },

  props: {
    memberArr: {
      type: Array
    },
    banVideo: {
      type: Boolean,
      default: false
    }
  },

  created () {
    if (this.banVideo) [this.funcArr[1].url, this.funcArr[1].exUrl] = [this.funcArr[1].exUrl, this.funcArr[1].url]
  },

  methods: {
    /** 更换图片 */
    exchangeImg(e) {
      let src = e.src || e.target.src
      let datasrc = e.src ? e.getAttribute('data-src') : e.target.getAttribute('data-src')
      e.src ? e.src = datasrc : e.target.src = datasrc
      e.src ? e.setAttribute('data-src', src) : e.target.setAttribute('data-src', src)
    },
    /** 执行功能 */
    changeFunc (memberinfo, val, e) {
      if (this.banVideo) {
        this.$notify.error({
          title: '提示',
          message: '语音会议中不允许开启摄像头！'
        })
        return
      }
      this.umvideo.sendMsg({
        toUserId: memberinfo.id,
        msgType: 'controlFunc',
        msg: val.functionname
      })
      .then(res => {
        res.code == 200 && this.exchangeImg(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.member_list {
  height: calc(100% - 51px);
  ul {
    height: 100%;
    overflow-y: auto;
    li {
      display: flex;
      align-items: center;
      font-size: 14px;
      justify-content: space-between;
      padding: 15px 20px;
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      img:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>